<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../static/struct/layuimini/lib/layui-v2.5.5/css/layui.css " media="all">
    <!--<script type="text/javascript" src="../../static/js/login/jquery.min.js"></script>-->
    <script src="../../../static/struct/layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../../static/js/generaljs/watermarkbycanvas.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="../../../static/css/generalcss/layuitablecheckboxfix.css">
    <script src="../../../static/struct/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <style>
        .top{
            width: 50px;
            height: 50px;
            background-color: rgb(0, 150, 136);
            border-radius: 10px;
            position: fixed;
            right: 20px;
            bottom: 10%;
        }
        .top #topArrow{
            width: 25px;
            height: 25px;
            border: 2px solid #fff;
            border-right:none;
            border-bottom:none;
            display: inline-block;
            transform: translate(12px,18px) rotate(45deg);
            cursor: pointer;
            z-index: 1000;//避免被其他div遮盖
        }
        .top #topArrow:hover{
            border-width: 4px;
        }
    </style>
</head>
<body onload="addWaterMarker()">



    <!--  设置隐藏字段   -->
    <input id="sourcePkId" name="sourcePkName" type="hidden" th:value="${rejectInfo.pkRejectInfo}" />
    <input id="taskIdCode" name="taskIdName" type="hidden" th:value="${rejectInfo.taskId}" />


<!--
border-top: 2px solid #fff;//利用border和rotate绘制向上的箭头
            border-left: 2px solid #fff;
-->
<br/>
<div class="layui-form">
    <div class="top">
        <span title="回到页面顶部" id="topArrow"></span>
    </div>
    <form class="layui-form" action="#" method="post" id="userform">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn" id = "rejectSaveBtnId">保存</button>
                    <button type="button" class="layui-btn layui-btn-disabled " disabled id = "rejectTempSaveBtnId" >保存草稿(暂未开放)</button>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn" id="rejectCancelBtnId">取消</button>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-disabled " disabled id = "rejectCommitBtnId">提交审核</button>
                </div>
            </div>
        </div>
        <hr class="layui-border-green">
        <div class="layui-form-item">
            <!-- thymleaf展示数据 -->
            <div class="layui-inline">
                <label class="layui-form-label">单据号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="billno" th:value="${rejectInfo.taskId}" disabled readonly placeholder="" autocomplete="off" class="layui-input"  >
                    </div>
                <label class="layui-form-label">驳回原因：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="RejectInfo" th:value="${rejectInfo.RejectInfo}" disabled readonly placeholder="" autocomplete="off" class="layui-input" style="width: 500px" >
                        <!--<textarea name="RejectInfo" required lay-verify="required" readonly th:value="${rejectInfo.RejectInfo}" class="layui-textarea"></textarea>-->
                    </div>
            </div>
            <hr class="layui-border-green">
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">处理信息：</label>
                <div class="layui-input-inline">
                    <textarea name="area" required id = "inputAreaId" lay-verify="required" class="layui-textarea" style="width: 800px"  oninput="changeBtnable()" th:text="${detail.processText}"></textarea>
                </div>
            </div>
        </div>
        <hr class="layui-border-green">
        <div class="layui-form-item" style="margin: 10px 10px 10px 30px">

                <!-- 上传列表 -->
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-disabled " disabled id="uploadId">文件上传</button>
                    <button type="button" class="layui-btn layui-btn-disabled " disabled id="uploadListAction">开始上传</button>
                    <div class="layui-upload-list" style="max-width: 800px;">
                        <table class="layui-table">
                            <colgroup>
                                <col>
                                <col width="150">
                                <col width="260">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr><th>文件名</th>
                                <th>大小</th>
                                <th>上传进度</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="uploadList"></tbody>
                        </table>
                    </div>
                </div>
        </div>


    </form>
</div>
<script>

    //页面加载完成执行的事件
    function changeBtnable() {
        if ($('#inputAreaId').val()) {
            //rejectSaveBtnId,rejectTempSaveBtnId,rejectCancelBtnId,rejectCommitBtnId,uploadId,uploadListAction

            $('#rejectSaveBtnId').removeAttr('disabled');
            $('#rejectSaveBtnId').removeClass('layui-btn-disabled');
            $('#rejectCommitBtnId').removeAttr('disabled');
            $('#rejectCommitBtnId').removeClass('layui-btn-disabled');
            /*
            $('#rejectTempSaveBtnId').removeAttr('disabled');
            $('#rejectTempSaveBtnId').removeClass('layui-btn-disabled');
            $('#rejectCommitBtnId').removeAttr('disabled');
            $('#rejectCommitBtnId').removeClass('layui-btn-disabled');
            $('#uploadId').removeAttr('disabled');
            $('#uploadId').removeClass('layui-btn-disabled');
            $('#uploadListAction').removeAttr('disabled');
            $('#uploadListAction').removeClass('layui-btn-disabled');
             */

        } else {
            $('#rejectSaveBtnId').attr('disabled');
            $('#rejectSaveBtnId').addClass('layui-btn-disabled');
            $('#rejectTempSaveBtnId').attr('disabled');
            $('#rejectTempSaveBtnId').addClass('layui-btn-disabled');
            $('#rejectCommitBtnId').attr('disabled');
            $('#rejectCommitBtnId').addClass('layui-btn-disabled');
            $('#uploadId').attr('disabled');
            $('#uploadId').addClass('layui-btn-disabled');
            $('#uploadListAction').attr('disabled');
            $('#uploadListAction').addClass('layui-btn-disabled');

        }
    }




    $(document).ready(function(){

        //加载界面时给按钮状态
        changeBtnable();




        layui.use(['upload', 'element', 'layer'], function() {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;


            //多文件列表
            var uploadListIns = upload.render({
                elem: '#uploadId'
                ,elemList: $('#uploadList') //列表元素对象
                ,url: '/LimsWebControllers/uploadRejectFiles'
                ,accept: 'file'
                ,multiple: true
                ,number: 10
                ,auto: false
                ,bindAction: '#uploadListAction',choose: function(obj){
                    var that = this;
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                            ,'<td>'
                            //,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        that.elemList.append(tr);
                        element.render('progress'); //渲染新加的进度条组件
                    });
                }
                ,done: function(res, index, upload){ //成功的回调
                    layer.msg('dfdfsfdsafsdf');

                    var that = this;
                    //if(res.code == 0){ //上传成功
                    var tr = that.elemList.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).html(''); //清空操作
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                    return;
                    //}
                    this.error(index, upload);
                }
                ,allDone: function(obj){ //多文件上传完毕后的状态回调
                    console.log(obj)
                }
                ,error: function(index, upload){ //错误回调
                    var that = this;
                    var tr = that.elemList.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
                ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
                    element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
                }
            });

            //rejectSaveBtnId,rejectTempSaveBtnId,rejectCancelBtnId,rejectCommitBtnId,uploadId,uploadListAction

            //保存按钮点击
            $('#rejectSaveBtnId').click(function () {
                //ajax先把表单内容传走
                //组织表单josn taskIdCode
                var data = {};
                data['sourcePkId'] = $('#sourcePkId').val();
                data['taskIdCode'] = $('#taskIdCode').val();
                data['textArea'] = $('#inputAreaId').val();
                //let pk = $('#sourcePkId').val();
                //console.log(pk);
                let loading = parent.layer.load(1);
                $.ajax({
                    type:"post",
                    url:"/LimsWebControllers/saveRejectDetail",
                    data:JSON.stringify(data),
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success:function(res){
                        if(res.code == '200'){
                            //console.log($('#sourcePkId').val());
                            layer.msg('保存成功');
                            //只有保存成功，才激活提交审核和文件上传按钮
                            $('#rejectCommitBtnId').removeAttr('disabled');
                            $('#rejectCommitBtnId').removeClass('layui-btn-disabled');
                            $('#uploadId').removeAttr('disabled');
                            $('#uploadId').removeClass('layui-btn-disabled');
                            parent.layer.close(loading);
                        }else{
                            parent.layer.close(loading);
                            layer.alert('保存失败:' + res.msg);

                        }
                    }
                });

            });

            //提交按钮动作
            $('#rejectCommitBtnId').click(function () {
                var data = {};
                data['sourcePkId'] = $('#sourcePkId').val();
                data['taskIdCode'] = $('#taskIdCode').val();
                data['textArea'] = $('#inputAreaId').val();
                let loading = parent.layer.load(1);
                $.ajax({
                    type:"post",
                    url:"/LimsWebControllers/commitRejectDetail",
                    data:JSON.stringify(data),
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success:function(res){
                        if(res.code == '200'){
                            //console.log($('#sourcePkId').val());
                            layer.msg('提交成功');
                            $('#rejectSaveBtnId').attr('disabled');
                            $('#rejectSaveBtnId').addClass('layui-btn-disabled');
                            $('#rejectTempSaveBtnId').attr('disabled');
                            $('#rejectTempSaveBtnId').addClass('layui-btn-disabled');
                            $('#rejectCommitBtnId').attr('disabled');
                            $('#rejectCommitBtnId').addClass('layui-btn-disabled');
                            $('#uploadId').attr('disabled');
                            $('#uploadId').addClass('layui-btn-disabled');
                            $('#uploadListAction').attr('disabled');
                            $('#uploadListAction').addClass('layui-btn-disabled');
                            parent.layer.close(loading);
                        }else{
                            parent.layer.close(loading);
                            layer.alert('保存失败:' + res.msg);
                        }
                    }
                });
            })

            //取消按钮
            $('#rejectCancelBtnId').click(function () {
                if($('#inputAreaId').val()){
                    layer.confirm("确定要取消吗？取消所有已录入未保存的内容将不能恢复",{title:'DataloaderCloud取消确认'},function(index){
                        parent.layer.closeAll();
                    })
                }else{
                    parent.layer.closeAll();
                }

            });


            //回到顶部按钮
            $("#topArrow").click(function(){
                $(document).scrollTop(0);
            });
        });



    });



</script>
<!--
<p>Hello, <shiro:principal/>, how are you today?</p>
<p><shiro:user>guest</shiro:user></p>
<span th:text="${session.usercode}">人员工号</span>
-->
<!--
<br/>
<div class="layui-form">
    <form class="layui-form" action="#" method="post" id="userform">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="cuserid" th:value="${user.cuserid}" readonly placeholder="系统自动生成" autocomplete="off" class="layui-input"  >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户工号</label>
                <div class="layui-input-inline">
                    <input type="text" name="userCode" th:value="${user.userCode}" readonly id='usercode' lay-verify="required" autocomplete="off" class="layui-input" onblur="setmail()">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" readonly th:value="${user.userName}" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电子邮件</label>
                <div class="layui-input-inline">
                    <input type="text" id="mail" name="email" th:value="${user.email}" readonly lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否锁定</label>
                <div class="layui-input-inline">

                    <input type="text" id="lock" name="islocked" th:value="${user.islocked}" readonly lay-verify="required" autocomplete="off" class="layui-input">

                </div>
            </div>
        </div>

    </form>
</div>

-->
</body>

</html>